import React, { memo, useState } from 'react'
import { DetailWrapper } from './style'
import { shallowEqual, useSelector } from 'react-redux'
import PictureView from '@/base-ui/picture-view'
import useFixedHeader from '@/hooks/useFixedHeader'

const Detail = memo(() => {
  // 是否显示图片浏览器
  const [isShow, setIsShow] = useState(false)
  // 点击某张图片的下标 传给图片浏览器直接用于该下标的图片展示
  const [currentIndex, setCurrentIndex] = useState(0)
  // 当前详情页对应的数据
  const {detailInfo} = useSelector(state => ({
    detailInfo: state.detail.detailInfo
  }), shallowEqual)
  // 使用不是fixed的导航栏
  useFixedHeader(false)
  // 点击图片回掉函数
  function clickHandler(index) {
    // 设置点击的图片下标 传给图片浏览器
    setCurrentIndex(index)
    // 显示图片浏览器
    setIsShow(true)
  }
  return (
    <DetailWrapper>
     <div className='pictures'>
        <div className='left'>
          <div className='item' onClick={e => clickHandler(0)}>
            <img src={detailInfo?.picture_urls?.[0]} alt="" />
            <div className='cover'></div>
          </div>
        </div>
        <div className='right'>
          {
            detailInfo?.picture_urls?.slice(1, 5).map((item, index) => {
              return (
                <div className='item' key={item} onClick={e => clickHandler(index + 1)}>
                  <img src={item} alt="" />
                  <div className='cover'></div>
                </div>
              )
            })
          }
        </div>
      </div>
      <div className='show-btn' onClick={e => setIsShow(true)}>显示照片</div>
      {
        isShow && <PictureView clickClose={e => setIsShow(false)} pictures = {detailInfo?.picture_urls} initIndex={currentIndex}/>
      }
      <div className='detail-info'></div>
    </DetailWrapper>
  )
})

export default Detail